import { Form, Button, Input, Row, Col } from 'antd';

const FormItem = Form.Item;

const formLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 18 }
};
const buttonLayout = {
  span: '18',
  offset: '4'
};

let BuildForm = ({ unit, form, canDeploy, onBuildConfUpdate, updateFetching }) => {
  const { getFieldProps, validateFields } = form;
  const targetField = getFieldProps('target', {
    initialValue: unit.target
  });
  const packageCommandField = getFieldProps('packageCommand', {
    initialValue: unit.packageCommand,
    rules: [
      { required: true, message: '打包命令不能为空' }
    ]
  });
  const dockerFileField = getFieldProps('dockerFile', {
    initialValue: unit.dockerFile,
    rules: [
      { required: true, message: '打包命令不能为空' }
    ]
  });

  const onSubmit = (evt) => {
    evt.preventDefault();
    validateFields((error, values) => {
      if (!!error) {
        return;
      }
      onBuildConfUpdate(unit.id, unit.runtimeId, values);
    });
  };

  return (
    <Form horizontal onSubmit={onSubmit} form={form}>
      {canDeploy ? (
        <FormItem label='目标路径：' {...formLayout}>
          <div className='form-item-tip'>执行 Dockerfile 的目标路径，从工程根目录算起</div>
          <Input type='text' {...targetField}/>
        </FormItem>
      ) : undefined}
      <FormItem label='打包命令：' {...formLayout}>
        <div className='form-item-tip'>打包应用的命令，在工程根目录执行，可以填写多行</div>
        <Input type='textarea' {...packageCommandField}/>
      </FormItem>
      {canDeploy ? (
        <FormItem label='Dockerfile：' {...formLayout}>
          <div className='form-item-tip'>Dockerfile ，会被复制到目标路径下执行以便生成 Docker Image</div>
          <Input type='textarea' rows='10' {...dockerFileField}/>
        </FormItem>
      ) : undefined}
      <Row>
        <Col {...buttonLayout}>
          <Button processing={updateFetching} type='primary' htmlType='submit'>确定</Button>
        </Col>
      </Row>
    </Form>
  );
};
BuildForm = Form.create()(BuildForm);

export default BuildForm;
